
$.post("./php/goodCar.php").then(res => {
  	let jsonArr = JSON.parse(res);
  	let oDiv = document.querySelector(".div13");
	console.log(oDiv);
  	let str =
  		`
		<tr>
				<th style="width: 100px;">序号</th>
				<th style="width: 100px;">皮肤展示</th>
				<th style="width: 300px;">皮肤名称</th>
				<th style="width: 180px;" colspan="2">皮肤价格</th>
				<th style="width: 180px;" colspan="2">添加</th>
			</tr>
		`;
  	for (let i in jsonArr) {
  		console.log(jsonArr[i])
  		let str1 =
  			`<tr>
			 		<td >${jsonArr[i].goods_id}</td>
					<td ><img id="g_img" style="width: 36px;height: 65px;" src=${jsonArr[i].goods_img}></td>
			 		<td ><b>${jsonArr[i].goods_name}</b></td>
			 		<td colspan="2">单价：<span>${jsonArr[i].goods_price}</span></td>
			 		<td colspan="2">操作：<button id="button" type="button" class="add-but" value="">添加</button></td>
			 	</tr>
			 `;
  	str += str1;
  	}
	str2=`
	<table border="1" cellspacing="0" id="tabOne">
		<tr>
			<th style="width: 70px;">序号</th>
			<th>皮肤展示</th>
			<th style="width: 220px;">皮肤名称</th>
			<th>商品数量</th>
			<th style="width: 100px;">商品价格</th>
			<th style="width: 120px;">小计</th>
			<th style="width: 140px;">操作</th>
		</tr>
		<tr>
			<td colspan="7">共<span id="good-add-num">0</span>件商品,共花费<span id="cgood-add-sprice">0</span>元。</td>
		</tr>
	</table>
	`;
  	oDiv.innerHTML = "<table border='1'cellspacing='0'>"+str+"</table>"+str2;
 
    let a = new Cart();
    a.eventBind();
    a.addbnt();
    let oBack = document.getElementById("back");
    Back(oBack);
 })



 class Cart {

  	//商品id
  	setgoddsId() {
  		//获取id
  		let oGoodId = document.getElementsByClassName("good-id");
  		for (let i = 0; i < oGoodId.length; i++) {
  			//给id元素赋值
  			oGoodId[i].innerHTML = i + 1;
  		}
  	}

  	//获取更新商品总数量
  	getaddnum() {
  		//获取商品数量元素
  		let oGoodNum = document.getElementsByClassName("good-num");
  		//遍历商品数量元素
  		let goodsTotalNums = 0;
  		for (let i = 0; i < oGoodNum.length; i++) {
  			goodsTotalNums += Number(oGoodNum[i].innerHTML);
  		}
  		//获取商品总数量的元素
  		let oGoodsTotalNums = document.getElementById("good-add-num");
  		//赋值商品总数量的元素
  		oGoodsTotalNums.innerHTML = goodsTotalNums;
  	}

  	//获取更新商品总价格
  	getaddprice() {
  		//获取价格元素
  		let oCgoodSingleSprice = document.getElementsByClassName("cgood-single-sprice");
  		//遍历价格元素
  		let oCgoodSingleTotaSprice = 0;
  		for (let i = 0; i < oCgoodSingleSprice.length; i++) {
  			oCgoodSingleTotaSprice += Number(oCgoodSingleSprice[i].innerHTML);
  		}
  		//获取商品总价格的元素
  		let oCgoodAddSprice = document.getElementById("cgood-add-sprice");
  		//赋值商品总价格的元素
  		oCgoodAddSprice.innerHTML = oCgoodSingleTotaSprice;
  	}

  	//计算小计
  	getGoodsSinglePrice(num, price) {
  		return num * price;
  	}

  	//+按钮
  	goodAdd(btn) {
  		//获取商品数量
  		let oGoodsNum = btn.previousElementSibling;
  		oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
  		//获取商品的单价
  		let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
  		//获取单个商品的总价
  		let oGoodsSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
  		//计算单个商品的总价
  		oGoodsSinglePrice.innerHTML = this.getGoodsSinglePrice(oGoodsNum.innerHTML, oGoodsPrice.innerHTML);
  		this.getaddnum();
  		this.getaddprice();
  	}


  	//-按钮
  	goodMin(btn) {
  		//获取商品数量
  		let oGoodNum = btn.nextElementSibling;
  		if (oGoodNum.innerHTML > 0) {
  			//让商品数量-1
  			oGoodNum.innerHTML = oGoodNum.innerHTML - 1;
  			//获取商品的单价
  			let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
  			//获取单个商品的总价
  			let oGoodsSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
  			//计算单个商品的总价
  			oGoodsSinglePrice.innerHTML = this.getGoodsSinglePrice(oGoodNum.innerHTML, oGoodsPrice.innerHTML);
  		}

  		this.getaddnum();
  		this.getaddprice();
  	}

  	//按钮绑定
  	eventBind() {
  		//获取所有+-按钮
  		let oBtn = document.getElementsByClassName("add-min");
  		let that = this;
  		for (let i = 0; i < oBtn.length; i++) {
  			if (i % 2 == 0) {
  				oBtn[i].onclick = function() { //加按钮
  					that.goodMin(this);
  				}
  			} else {
  				oBtn[i].onclick = function() { //-按钮
  					that.goodAdd(this);
  				}
  			}
  			this.setgoddsId();
  		}

  		//删除方法
  		//获取删除按钮
  		let oInput = document.getElementsByTagName("input");
  		//遍历删除按钮
  		for (let i = 0; i < oInput.length; i++) {
  			//给遍历删除绑定点击事件
  			oInput[i].onclick = function() {
  				this.parentNode.parentNode.remove();
  				that.getaddnum();
  				that.getaddprice();
  			}
  		}
  	}
  	//新增货物
  	addList(btn) {
  		//增加列表的商品名称
  		let oGoodsAddName = btn.parentNode.previousElementSibling.previousElementSibling;
  		//增加列表的商品价格
  		let oGoodsAddPrice = btn.parentNode.previousElementSibling.firstChild;
  		//商品名称
  		let ogoodName = document.getElementsByClassName("good-name");
  		let flag = true;
  		for (let i = 0; i < ogoodName.length; i++) {
  			if (oGoodsAddName.innerHTML == ogoodName[i].innerHTML) {
  				flag = false;
  				//获取商品数量
  				let ogoodNum = ogoodName[i].nextElementSibling.firstElementChild.nextElementSibling;
  				ogoodNum.innerHTML++;
  				//获取商品单价
  				let ogoodPrice = ogoodName[i].nextElementSibling.nextElementSibling.firstElementChild;

  				ogoodName[i].nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild
  					.innerHTML = this.getGoodsSinglePrice(ogoodNum.innerHTML, ogoodPrice.innerHTML);
  			}
  		}
  		if (flag) {
  			let otabOne = document.getElementById("tabOne").firstElementChild;
  			let tBtnNum = btn.parentNode.previousElementSibling.previousElementSibling;
  			let tBtnPrice = btn.parentNode.previousElementSibling.firstElementChild;
  	        let timg=btn.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild;
			document.getElementById("g_img");
  			let strLi =
  				`<tr>
						        <td style="width: 70px;"><span class="good-id"></span></td>
								<td><img src="${timg.src}" style="width: 36px;height: 65px;"></td>
								<td class="good-name">${tBtnNum.innerHTML}</td>
								<td>
									<button type="button" class="add-min">-</button>
									<span class="good-num">1</span>
									<button type="button" class="add-min">+</button>
								</td>
								<td>单价：<span class="good-price">${tBtnPrice.innerHTML}</span></td>
								<td>小计：<span class="cgood-single-sprice">${tBtnPrice.innerHTML*1}</span></td>
								<td>操作：<input type="button" value="删除"></button></td>
							</tr>`;
  			let newTr = document.createElement("tr");
  			newTr.innerHTML = strLi;
  			otabOne.insertBefore(newTr, otabOne.lastElementChild);
  		}
  		this.eventBind();
  		this.getaddnum();
  		this.getaddprice();
  		this.setgoddsId();
  	}

  	//增加按钮绑定
  	addbnt() {
  		let oaddBut = document.getElementsByClassName("add-but");
  		let that = this;
  		for (let i = 0; i < oaddBut.length; i++) {
  			oaddBut[i].onclick = function() {
  				that.addList(this);
  			}
  		}
  	}

  }

  function Back(but) {
  	but.onclick = function() {
  		var time = null;
  		time = setInterval(function() {
  			var osTop = document.documentElement.scrollTop || document.body.scrollTop;
  			var isSpeed = Math.floor(-osTop / 8);
  			document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
  			if (osTop == 0) {
  				clearInterval(time);
  			}
  		}, 30);
  	}
  }
